<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>提交</title>
<link rel="stylesheet" type="text/css" href="css/public.css">
<link rel="stylesheet" type="text/css" href="css/gwc.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

<body style="max-width:640px; min-width:320px; margin:0 auto;" onload="init()">
	<div class="header">
    	<a href="spxq.html"><img src="img/左箭头 (2).png"></a>
        <h1>訂單資訊</h1>
    </div>
    <form id="payForm" action="tjcg.html" method="post">
    <div class="gwqd">
    	<div class="gwqds">
        	<div class="h-gwqds group">
            	<img src="img/1.jpg" class="left tupian">
            	<a href="#" class="right">【正品行貨】999純銀手鐲現貨現買買一送一</a>
            </div>
            <div class="b-gwqds">
                <p class="size gg group">
                <em class="left zb">規格：</em>
                <strong>
                  <span class="alt" name="499">S<img src="img/duigou.png" width="15" height="15"></span>
                  <span name="599">M<img src="img/duigou.png" width="15" height="15"></span>
                  <span name="699">L<img src="img/duigou.png" width="15" height="15"></span>
                  <span name="799">XL<img src="img/duigou.png" width="15" height="15"></span>
                </strong>
                </p>
                <p class="color gg group">
                   <em class="left zb">顏色：</em>
                   <strong>
                    <span class="alt" name="img/2.jpg">紅色<img src="img/duigou.png" width="15" height="15"></span>
                    <span name="img/1.jpg">白色<img src="img/duigou.png" width="15" height="15"></span>
                    <span name="img/4.jpg">黑色<img src="img/duigou.png" width="15" height="15"></span>
                    <span name="img/5.jpg">黃色<img src="img/duigou.png" width="15" height="15"></span>
                    <span name="img/1.jpg">白色<img src="img/duigou.png" width="15" height="15"></span>
                    <span name="img/2.jpg">黑色<img src="img/duigou.png" width="15" height="15"></span>
                    <span name="img/4.jpg">黃色<img src="img/duigou.png" width="15" height="15"></span>
                    <span name="img/5.jpg">白色<img src="img/duigou.png" width="15" height="15"></span>
                    <span name="img/1.jpg">黑色<img src="img/duigou.png" width="15" height="15"></span>
                    <span name="img/2.jpg">黃色<img src="img/duigou.png" width="15" height="15"></span>
                   </strong>
                </p>
                <div class="shuliang">
                   <p class="group"><em class="left zb">單價：</em><span class="m-l">$</span><span class="price">490.00</span></p>
                    <p class="group"><em class="left zb">数量：</em>
                      <img src="img/减.png" class="min left" width="30" height="30"> 
                      <input class="text_box left" name="" type="text" value="1" /> 
                      <img src="img/加.png" class="add left" width="30" height="30">
                    </p>
                </div>
            </div>
            <p class="zj"><a href="javascript:void(0)" class="gwc group">加入購物車</a></p>
        </div>
    </div>
    
    <div class="xzlb">
    	<h1 class="black">已選擇的商品列表</h1>
        <ul class="jg">
        </ul>
    </div>
    <p class="totalP"><span>合计：&nbsp;&nbsp;<strong>$</strong></span><strong class="totalPrice">0.00</strong></p>

    <h1 class="black">收貨人資訊</h1>
    <div class="gwqd group">
        <div class="bd group" style="margin-top:20px;">
            <label><span class="red">*</span>收貨人</label>
            <input name="name" class="order-name" maxlength="20" placeholder="請填寫中文姓名" emptmsg="請輸入收貨人姓名" errormsg="請填寫1-16位中文姓名" type="text">
        </div>
        <div class="bd group">
            <label><span class="red">*</span>行動電話</label>
            <input name="mobile" class="paytel" id="dhyz" placeholder="請填寫您的行動電話" maxlength="11" emptmsg="行動電話號碼不能為空" errormsg="行動電話號碼格式錯誤" type="tel">
        </div>
        <div class="bd group">
            <label><span class="red">*</span>E-Mail</label>
            <input name="email" class="order-name" placeholder="填寫常用的郵箱" maxlength="100" emptmsg="填寫常用的郵箱" errormsg="郵箱格式不正確" type="email">
        </div>
        <div class="bd group">
            <label><span class="red">*</span>收貨地址</label>
            <select id="province" size=1 onchange="getCity()"> 
              <option value= 0 >基隆市</option> 
              <option value= 1 >臺北市</option> 
              <option value= 2 >新北市</option> 
              <option value= 3 >宜蘭縣</option> 
              <option value= 4 >新竹市</option>
              <option value= 5 >新竹縣</option>
              <option value= 6 >桃園市</option> 
              <option value= 7 >苗栗縣</option> 
              <option value= 8 >臺中市</option> 
              <option value= 9 >彰化縣</option> 
              <option value= 10 >南投縣</option> 
              <option value= 11 >嘉義市</option> 
              <option value= 12 >嘉義縣</option> 
              <option value= 13 >雲林縣</option> 
              <option value= 14 >臺南市</option> 
              <option value= 15 >高雄市</option> 
              <option value= 16 >屏東縣</option> 
              <option value= 17 >臺東縣</option> 
              <option value= 18 >花蓮縣</option> 
              <option value= 19 >金門縣</option> 
              <option value= 20 >連江縣</option> 
              <option value= 21 >澎湖縣</option> 
            </select>
            <select id="city"> 
            </select>
        </div>
        <div class="bd group">
            <label><span class="red">*</span>詳細地址</label><input type="text" name="address" id="address" class="order-addr" placeholder="重要 某市+某區+街道門牌信息" emptmsg="請輸入詳細收貨地址">
        </div>
        <div class="bd group">
            <label>留言</label>
            <textarea name="remark" class="order-remark" placeholder="如備用聯繫電話" rows="5"></textarea>
        </div>
        <button type="submit" class="btn" onclick="return process();">提交訂單</button>
    </div>
    </form>
    
    <div class="rmtj">
    	<h1 class="black">熱賣推薦</h1>
        <div class="horizontal-list2" style="padding:5px 0 0;">
        	<a href="#"><div class="trending-search-item2">
            	<img src="img/helloKatty.jpg">
                <div>
                	<p>◆ASM◆2017夏装新款 气质显瘦吊带抹胸连衣裙百褶裙子女装黑色</p>
                    <span>$168</span>
                </div>
            </div></a>
            <a href="#"><div class="trending-search-item2">
            	<img src="img/helloKatty.jpg">
                <div>
                	<p>◆ASM◆2017夏装新款 气质显瘦吊带抹胸连衣裙百褶裙子女装黑色</p>
                    <span>$168</span>
                </div>
            </div></a>
            <a href="#"><div class="trending-search-item2">
            	<img src="img/helloKatty.jpg">
                <div>
                	<p>◆ASM◆2017夏装新款 气质显瘦吊带抹胸连衣裙百褶裙子女装黑色</p>
                    <span>$168</span>
                </div>
            </div></a>
            <a href="#"><div class="trending-search-item2">
            	<img src="img/helloKatty.jpg">
                <div>
                	<p>◆ASM◆2017夏装新款 气质显瘦吊带抹胸连衣裙百褶裙子女装黑色</p>
                    <span>$168</span>
                </div>
            </div></a>
            <a href="#"><div class="trending-search-item2">
            	<img src="img/helloKatty.jpg">
                <div>
                	<p>◆ASM◆2017夏装新款 气质显瘦吊带抹胸连衣裙百褶裙子女装黑色</p>
                    <span>$168</span>
                </div>
            </div></a>
            <a href="#"><div class="trending-search-item2">
            	<img src="img/helloKatty.jpg">
                <div>
                	<p>◆ASM◆2017夏装新款 气质显瘦吊带抹胸连衣裙百褶裙子女装黑色</p>
                    <span>$168</span>
                </div>
            </div></a>
            <a href="#"><div class="trending-search-item2">
            	<img src="img/helloKatty.jpg">
                <div>
                	<p>FANSILANEN喇叭袖V领条纹修身裙子夏连衣裙衬衫裙中长款高腰a字裙</p>
                    <span>$168</span>
                </div>
            </div></a>
            <a href="#"><div class="trending-search-item2">
            	<img src="img/helloKatty.jpg">
                <div>
                	<p>FANSILANEN喇叭袖V领条纹修身裙子夏连衣裙衬衫裙中长款高腰a字裙</p>
                    <span>$168</span>
                </div>
            </div></a>
            <a href="#"><div class="trending-search-item2">
            	<img src="img/helloKatty.jpg">
                <div>
                	<p>FANSILANEN喇叭袖V领条纹修身裙子夏连衣裙衬衫裙中长款高腰a字裙</p>
                    <span>$168</span>
                </div>
            </div></a>
            <a href="#"><div class="trending-search-item2">
            	<img src="img/helloKatty.jpg">
                <div>
                	<p>FANSILANEN喇叭袖V领条纹修身裙子夏连衣裙衬衫裙中长款高腰a字裙</p>
                    <span>$168</span>
                </div>
            </div></a>
            <a href="#"><div class="trending-search-item2">
            	<img src="img/helloKatty.jpg">
                <div>
                	<p>FANSILANEN喇叭袖V领条纹修身裙子夏连衣裙衬衫裙中长款高腰a字裙</p>
                    <span>$168</span>
                </div>
            </div></a>
            <a href="#"><div class="trending-search-item2">
            	<img src="img/helloKatty.jpg">
                <div>
                	<p>FANSILANEN喇叭袖V领条纹修身裙子夏连衣裙衬衫裙中长款高腰a字裙</p>
                    <span>$168</span>
                </div>
            </div></a>
            <a href="#"><div class="trending-search-item2">
            	<img src="img/helloKatty.jpg">
                <div>
                	<p>FANSILANEN喇叭袖V领条纹修身裙子夏连衣裙衬衫裙中长款高腰a字裙</p>
                    <span>$168</span>
                </div>
            </div></a>
            <a href="#"><div class="trending-search-item2">
            	<img src="img/helloKatty.jpg">
                <div>
                	<p>FANSILANEN喇叭袖V领条纹修身裙子夏连衣裙衬衫裙中长款高腰a字裙</p>
                    <span>$168</span>
                </div>
            </div></a>
        </div>
    </div>
    
    <!-- Swiper JS -->
	<script type="text/javascript" src="js/swiper.min.js"></script>
    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 30,
        freeMode: true
    });
    </script>
      
 <!--选择规格-->
 <script type="text/javascript">
	    var wz1;
		var wz2;
        var tt;
	    var sum = 0;
    $(function(){
		$('.swiper-slide').click(function(){
			$(this).addClass('borderalt').siblings().removeClass('borderalt');
		})	
		
		$('p.size span').click(function(){
			$(this).addClass('alt').siblings().removeClass('alt');
			$(".price").text($(this).attr("name"));
			wz1=$(this).text();
		})	
		
		$('p.color span').click(function(){
			$(this).addClass('alt').siblings().removeClass('alt');
			var path=$(this).attr("name");
			$(".tupian").attr('src',path);
			wz2=$(this).text();
		})	
		$(".add").click(function(){ 
		  tt=$(this).parent().find('input[class*=text_box]'); 
		  tt.val(parseInt(tt.val())+1); 
	    }) 
		$(".min").click(function(){ 
			tt=$(this).parent().find('input[class*=text_box]'); 
			tt.val(parseInt(tt.val())-1); 
			if(parseInt(tt.val())<1){ 
				tt.val(1); 
			} 
		})  
		/*價格一樣的時候
		$(".gwc").bind("click",function(){ 
			var msg = "<li><span>已選:</span><span class='yss'></span><span class='ggs'></span><span class='sls'></span><span>件</span> <a href='javascript:void(0)'>刪除</a> </li>";
			$("ul.jg").append(msg);
			if($('span.yss').length==1){
			  $('span.yss').html(wz1);$('span.ggs').html(wz2);$('span.sls').text(tt.val());
			}else{
			  $('span.yss').eq($('span.yss').length-1).html(wz1);
			  $('span.ggs').eq($('span.ggs').length-1).html(wz2);
			  $('span.sls').eq($('span.sls').length-1).text(tt.val());
			}
			sum=0;
			var slsspan=$('span.sls');
			for(var i=0;i<slsspan.length;i++){
			  sum+=parseInt(slsspan.eq(i).text());	
			}	
			$(".totalPrice").html((sum*parseFloat($("span.price").html())).toFixed(2));
			bindListener();
		});
		function bindListener(){
			$("ul.jg li a").unbind().click(function(){
		     var element=$(this).parent().children().eq(3).text();
			 sum-=parseInt(element);
			 $(".totalPrice").html((sum*parseFloat($("span.price").html())).toFixed(2));
			 $(this).parent().remove();			  
			});
		}*/
		//價格不一樣的時候
		$(".gwc").bind("click",function(){ 
			var msg = "<li class='group'><span class='yxzd'></span><span class='yss'></span><span class='ggs'></span><span class='sls'></span><span class='jianshu'>件</span> <a href='javascript:void(0)' class='sc'></a> </li>";
			$("ul.jg").append(msg);
			
			if($('span.yss').length==1){
			  $('span.yss').html(wz1);
			  $('span.ggs').html(wz2);
			  $('span.sls').text(tt.val());
			}else{
			  $('span.yss').eq($('span.yss').length-1).html(wz1);
			  $('span.ggs').eq($('span.ggs').length-1).html(wz2);
			  $('span.sls').eq($('span.sls').length-1).text(tt.val());
			}
			sum += parseFloat($("span.price").html())* parseInt($('.text_box').val());
			$(".totalPrice").html(sum.toFixed(2));
			bindListener();
		});
		function bindListener(){
			$("ul.jg li a").unbind().click(function(){
		     var element=$(this).parent().children().eq(3).text();
			 var spanYs=$(this).parent().children().eq(1).text();
			 var jgs;
			 if(spanYs=="S"){
				jgs=$('p.size span').eq(0).attr('name');	 
			 }else if(spanYs=="M"){
				jgs=$('p.size span').eq(1).attr('name'); 
			 }else if(spanYs=="L"){
				jgs=$('p.size span').eq(2).attr('name'); 
			 }else{
				jgs=$('p.size>span').eq(3).attr('name');	 
			 }
			 sum-=parseInt(element)*parseFloat(jgs);
			 $(".totalPrice").html(sum.toFixed(2));
			 $(this).parent().remove();			  
			});
		};
		
		$("p.size span").eq(0).click();
		$("p.color span").eq(0).click();
		$(".add").click();
		$(".min").click();
	})
 </script> 
 <script type="text/javascript" src="js/area.js"></script>
 <script type="text/javascript" src="js/zhengze.js"></script>
</body>
</html>